<template>
	<view>
		<!-- 上层信息框 -->
		<view class="topInfo baseBack">
			<view class="cardNumber">{{ item.nickName || "" }}</view>
			<view style="color:#AC58FA;margin-top: 20rpx;margin-left: 10rpx;margin-right: auto;"></view>
			<view style="margin-right: 50rpx;margin-top: 50rpx;color:grey;">{{ item.createTime | dateFormat }}</view>
		</view>
		
		<!-- 虚线勿动 -->
		<view class="conUp">
			<view class="splitArea"></view>
		</view>
		


<!--      <u-empty icon="https://fziot.zheyun.top:9021/static/image/empty/data.png"></u-empty> -->

      <view v-for="(item,index) in recordList"> 
		  <!-- 中层信息框 -->
		  <view class="middleInfo baseBack">
			  <view style="padding-bottom: 10rpx; color: grey;">
				<view class="pp"></view>
				<text style=" letter-spacing: 22rpx;">机台号：</text>
				<text class="pv">{{ item.devNum || "" }}</text>
			  </view>
			  <view style="padding-bottom: 10rpx; color: grey;">
			    <view class="pp"></view>
			    <text style=" letter-spacing: 10rpx;">上班时间：</text>
			    <text class="pv">{{ item.createTime | dateTimeFormat }}</text>
			  </view>
			  <view style="padding-bottom: 10rpx; color: grey;">
			    <view class="pp"></view>
			    <text style=" letter-spacing: 10rpx;">下班时间：</text>
			    <text class="pv">{{ item.endTime | dateTimeFormat }}</text>
			  </view>
			  <view style="padding-bottom: 10rpx; color: grey;">
			    <view class="pp"></view>
			    <text style=" letter-spacing: 10rpx;">生产圈数：</text>
			    <text class="pv">{{ item.diffnum || 0 }}</text>
			  </view>
			  <view style="padding-bottom: 10rpx; color: grey;">
			    <view class="pp"></view>
			    <text style=" letter-spacing: 10rpx;">布种类型：</text>
			    <text class="pv">{{ item.taskDetail || "" }}</text>
			  </view>
			  <view style="padding-bottom: 10rpx; color: grey;">
			    <view class="pp"></view>
			    <text style=" letter-spacing: 10rpx;">布种价格：</text>
			    <text class="pv">{{ item.price || 0 }}</text>
			  </view>
			  <view style="padding-bottom: 10rpx; color: grey;">
			    <view class="pp"></view>
			    <text style=" letter-spacing: 10rpx;">机台小计：</text>
			    <text class="pv">{{ item.diffnum*item.price | priceFormat }}</text>
			  </view>
		  </view>
		  
		  <!-- 虚线勿动 -->
		  <view class="conUp">
		  	<view class="splitArea"></view>
		  </view>
	  </view>


		<!-- 下层信息框 -->
		<view class="downInfo baseBack">
			<view class="flex">
				<view style="margin-left: auto;margin-right: 40rpx;">
					小计：
					<text class="price">{{ item.daySalary | priceFormat }}</text>
					<text style="color: #AC58FA;">元</text>
				</view>
			</view>
<!-- 			<view style="padding-bottom: 15rpx; color: grey;">
				<view class="pp"></view>
				备注：
				<text class="pv">— —</text>
			</view> -->
		</view>
		<watermark :text="companyName"></watermark>
	</view>
</template>

<script>
	import {
		listRecord
	} from "@/api/record/record.js"
import watermark from 'components/warter/watermark.vue'
export default {
	components:{watermark},
	data() {
	  return {
		companyName:this.$store.getters.name,
		item:{},
		queryParams:{
			userId:'',
			createTime:'',
			pageNum: 1,
			pageSize: 10
		},
		statusLoadMore: "more", //more,loading,nomore
		dataTotal: 0,
		recordList:[]
	  }
	},
	onLoad(options) {
		this.item = JSON.parse(decodeURIComponent(options.item));
		this.queryParams.userId = this.item.userId
		this.queryParams.createTime = this.item.createTime
		
		listRecord(this.queryParams).then(response => {
			this.recordList = response.rows
			this.dataTotal = response.total
		})
	},
	onReachBottom() {
		let allTotal = this.queryParams.pageNum * this.queryParams.pageSize;
		if (allTotal < this.dataTotal) {
			uni.showLoading()
			this.statusLoadMore = 'loading'; //加载中状态
			this.queryParams.pageNum++;
			listRecord(this.queryParams).then(response => {
				uni.hideLoading()
				uni.stopPullDownRefresh();
				this.dataTotal = response.total
				this.recordList.push(...response.rows)
				if (this.recordList.length == this.dataTotal) {
					this.statusLoadMore = 'noMore';
				}
			})
		}
	},
	filters: {
		dateFormat(time) {
			if(time == null){
				return
			}
			var moment = require('moment');
			return moment(time).format("YYYY-MM-DD")
		},
		dateTimeFormat(time) {
			if(time == null){
				return
			}
			var moment = require('moment');
			return moment(time).format("YYYY-MM-DD HH:mm:ss")
		},
		priceFormat(price){
			if(price == null){
				return 0
			}
			let realVal = parseFloat(price).toFixed(2)
			return realVal
		}
	},
}
	
	
</script>

<style>
	.cardNumber{
		margin-right: auto;
		color: #AC58FA;
		font-size: 45rpx;
		margin: 40rpx 0rpx 40rpx 40rpx;
	}
	
	.topInfo{
		align-items: center;
		display: flex;
		height: 100rpx;
		margin: 48rpx auto 0rpx auto;
	}
	.middleInfo{
		margin: 0rpx auto;
	}
	.downInfo{
		padding-bottom: 40rpx;
		margin: 0rpx auto;
	}
	
	.conUp{
	   width: 92%; 
	   height: 70rpx;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   background-image: radial-gradient(circle at 448rpx 50rpx ,transparent 0%, transparent 8px,#fff 8px, #fff 100%);
	   background-position: 244rpx -16rpx;
	   margin: 0rpx auto;
	}
	
	.splitArea {
	  border: none;
	  border-top: 3rpx dashed #d8d8d8;
	  width: 85%;
	}
	
	.search{
		background-color: #fff;
		height: 100rpx;
	}
	
	.baseBack{
		width: 92%;
		background-color: #fff;
	}
	.price{
		color: #AC58FA;
		font-size: 50rpx;
	}
	.pp {
	  display: inline-block;
	  width: 10rpx;
	  height: 10rpx;
	  border-radius: 50%;
	  background-color: grey;
	  margin: 0rpx 30rpx 0rpx 50rpx;
	}
	.pv{
		font-weight: bold;
		margin-right: 6rpx;
		color: black;
	}
	
</style>